<template>
  <!-- 报警抓拍 -->
  <div class="alarm-capture-model">
    <!-- 缩小版 -->
    <div class="capture-list-mini" v-show="!showDetail">
      <div class="model-title" @click="openCaptureDetail">
        报警抓拍
        <i class="el-icon-arrow-up"></i>
      </div>
      <el-carousel indicator-position="none" arrow="never" :interval="3000">
        <el-carousel-item v-for="(itemArr, index) in miniPicListData" :key="'page_' + index">
          <ul class="capture-list">
            <li class="capture-list-item" v-for="(item, i) in itemArr" :key="'page_' + index + '_item_'+i">
              <img class="el-image" :src="item.picAlarm | formatPicUrl" @click="onPreview(item,itemArr)" />
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 放大版 -->
    <div class="capture-list-big" v-show="showDetail">
      <div class="model-title" @click="closeCaptureDetail">
        报警抓拍
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="pic-list-big">
        <ul v-infinite-scroll="getBigData" infinite-scroll-disabled="isOver" infinite-scroll-distance="10">
          <el-timeline>
            <el-timeline-item v-for="(item,key) in picBigDataObj" :timestamp="key" placement="top" :key="key">
              <template v-for="(picObj,index) in item">
                <img
                  class="el-image"
                  :src="picObj.picAlarm | formatPicUrl"
                  :key="index"
                  @click="onPreview(picObj,item)"
                />
              </template>
            </el-timeline-item>
          </el-timeline>
        </ul>
      </div>
      <!-- 暂无数据 -->
      <div class="no-data" v-if="isOver && Object.keys(picBigDataObj).length == 0"></div>
    </div>
  </div>
</template>
<script>
import {
  /* getAIAlartPic, getAIAlartPicTopN  */ getAIAlarmImages,
} from '@/api/record'

export default {
  name: 'AlarmCapture',
  props: {
    onPreview: Function,
  },
  data() {
    return {
      miniPicListData: [],
      picBigDataObj: {}, // 图片集合数据
      showDetail: false,
      pageIndex: -1,
      pageSize: 30,
      isOver: false,
    }
  },
  filters: {
    formatPicUrl(val) {
      if (
        val.indexOf('://file.kshqfire.com') < 0 &&
        val.indexOf('://file.yx-ilink.com') < 0
      )
        return val + '?w=200&h=140'
      return val + '?imageView2/2/w/200/h/140/q/75'
    },
  },
  created() {
    // 是否显示误报照片
    this.handlerType = !this.$store.state.showCorrectPic
      ? ''
      : '1,2,3,9,10,12,13,14'
    this.params = {}
    // 从server拿到的数据源
    this.originalData = []
  },
  methods: {
    // 获取缩小数据-不分页
    getMiniData() {
      let that = this
      getAIAlarmImages({
        orgIds: that.params.orgIds,
        startTime: that.params.startTime,
        endTime: that.params.endTime,
        alarmType: that.params.alarmType,
        queryType: 1, //Y	int	0不分页 1分页
        pageIndex: 0, //Y	int	第几页
        pageSize: 32, //Y	int	每页多少条
        handlerType: this.handlerType,
      }).then((res) => {
        if (res.status === 200) {
          let arr = res.data.map((n) => {
            if (n.pic) {
              n.picAlarm = n.pic
              n.picReset = n.pic
            }
            if (n.resultRegion) {
              n.resultRegionAlarm = n.resultRegion
              n.resultRegionReset = n.resultRegion
            }
            return n
          })
          let newArr = []
          for (let i = 0, len = Math.ceil(arr.length / 8); i < len; i++) {
            let obj = []
            if (i == len - 1 && arr.length % 8 !== 0) {
              for (let j = 0; j < arr.length % 8; j++) {
                obj.push(arr[i * 8 + j])
              }
            } else {
              for (let j = 0; j < 8; j++) {
                obj.push(arr[i * 8 + j])
              }
            }
            newArr.push(obj)
          }
          that.miniPicListData = newArr
        }
      })
    },
    // 获取展开数据-分页
    getBigData(pageIndex) {
      let that = this
      if (!that.params.orgIds) return
      that.$Ctl.loading(1, 10000)
      if (typeof pageIndex != 'undefined') {
        that.pageIndex = pageIndex
      }
      getAIAlarmImages({
        orgIds: that.params.orgIds,
        startTime: that.params.startTime,
        endTime: that.params.endTime,
        alarmType: that.params.alarmType,
        queryType: 1,
        pageIndex: that.pageIndex,
        pageSize: that.pageSize,
        handlerType: this.handlerType,
      }).then((res) => {
        if (res.status === 200) {
          res.data = res.data.map((n) => {
            if (n.pic) {
              n.picAlarm = n.pic
              n.picReset = n.pic
            }
            if (n.resultRegion) {
              n.resultRegionAlarm = n.resultRegion
              n.resultRegionReset = n.resultRegion
            }
            return n
          })
          if (that.pageIndex === 0) {
            that.originalData = res.data
          } else {
            that.originalData = that.originalData.concat(res.data)
          }

          // 最后一页停止滚动加载
          if (res.data.length < that.pageSize) {
            that.isOver = true
          } else {
            that.isOver = false
            that.pageIndex += 1
          }
          var picBigDataObj = {}
          that.originalData.forEach((item) => {
            let setTime = item.setTimeAlarm.split(' ')[0]
            if (picBigDataObj[setTime]) {
              picBigDataObj[setTime].push(item)
            } else {
              picBigDataObj[setTime] = [item]
            }
          })
          this.picBigDataObj = picBigDataObj

          that.$Ctl.loading(0)
        }
      })
    },
    getData(obj) {
      this.params = obj
      if (this.showDetail) {
        this.getBigData(0)
      } else {
        this.getMiniData()
      }
    },
    // 查看明细
    openCaptureDetail() {
      // 停止切换
      this.$emit('stopInterval', false)
      this.showDetail = true
      this.getBigData(0)
    },
    // 关闭明细
    closeCaptureDetail() {
      // 停止切换
      this.$emit('stopInterval', true)
      this.showDetail = false
      this.getMiniData()
    },
  },
}
</script>
<style lang="scss">
.alarm-capture-model {
  width: 100%;
  height: 100%;
  .model-title {
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 28px;
    font-weight: 600;
    color: rgba(81, 128, 206, 1);
    background: linear-gradient(
      0deg,
      rgba(99, 189, 241, 1) 0%,
      rgba(70, 153, 255, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    cursor: pointer;
    i {
      font-weight: bold;
    }
  }
  .el-image {
    width: 200px;
    height: 140px;
    object-fit: cover;
  }
  .capture-list-mini {
    position: relative;
    padding: 0 30px;
    height: 100%;
    overflow: hidden;
    background: url(../../../../../assets/images/detailPage/ai-capture-mini.png)
      center bottom no-repeat;
    background-size: contain;
    .el-carousel {
      height: 183px;
      .el-carousel__container {
        height: 100%;
      }
      .capture-list {
        display: flex;
        margin-top: 30px;
        width: 100%;
        height: calc(100% - 30px);
        .capture-list-item {
          display: inline-block;
          margin-left: 28px;
          width: 200px;
          height: 100%;
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
  }
  .capture-list-big {
    position: relative;
    margin-top: -685px;
    padding: 0 30px;
    height: 900px;
    background: url(../../../../../assets/images/detailPage/ai-capture-big.png)
      center bottom no-repeat;
    background-size: contain;
    z-index: 100;
    .pic-list-big {
      height: calc(100% - 60px);
      width: 100%;
      overflow-y: auto;
      margin-top: 20px;
    }
    .el-timeline {
      padding: 30px;
      padding-left: 300px;
      .el-timeline-item {
        padding-bottom: 60px;
        .el-timeline-item__tail {
          left: 9px;
          border-color: rgba(255, 255, 255, 0.2);
        }
        .el-timeline-item__node {
          width: 22px;
          height: 22px;
          background-color: #52dbf1;
        }
        .el-timeline-item__wrapper {
          padding-left: 85px;
          .el-timeline-item__timestamp {
            position: absolute;
            left: -200px;
            padding-top: 0;
            font-size: 24px;
            color: #fff;
          }
          .el-image {
            margin-right: 20px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}
</style>
